<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { onMounted, ref } from "@vue/runtime-core";
import axios from "axios";
import router from "@/router";

// interface Goods {
//   cover: string;
//   price: string;
//   title: string;
// }

interface typeData {
  actUserId: string;
  bgImg: string;
  avatar: string;
  intro: string;
  roomId: string;
  shopCarts: {
    goods: {
      cover: string;
      price: string;
      title: string;
    }
  };
  userName: string
  comments: {
    avatar: string
    content: string
  }
}

// interface Comments {
//   avatar: string
//   content: string
// }



const lives = ref<any[]>([]);
const singArr = ref();
// const goods = ref<Goods[]>([])
// const comments = ref<Comments[]>([])

const gocomment = (actUserId: string, roomId: string) => {
  console.log(111);
  router.push({
    path: "/livelroadcast",
    query: { actUserId: actUserId, roomId: roomId },
  });
};

onMounted(() => {
  // console.log(JSON.stringify(window.localStorage.getItem("singArr")));
  singArr.value = JSON.parse(window.localStorage.getItem("singArr") as any);
  axios
    .get(`https://apis.netstart.cn/mogujie/live/tabList?tabId=1&pageIndex=1`)
    .then(({ data }) => {
      console.log(data.data.lives);

      // goods.value = data.data.lives.map((i: typeData) => {
      //   return {
      //     goods: i.shopCarts.goods,
      //   }
      // })

      // comments.value = data.data.lives.map((i: typeData) => {
      //   return {
      //     comments: i.comments,
      //   }
      // })

      data.data.lives.forEach((element: any) => {
        // console.log(element);
        // console.log(singArr.value);

        singArr.value.forEach((res: any) => {
          // console.log(res, 1111111111111111);
          if (element.actUserId == res.actUserId) {
            lives.value.push(element);
          }
        });
      });

      // console.log(lives, 22222222222222);
    });

  axios
    .get(`https://apis.netstart.cn/mogujie/live/tabList?tabId=60&pageIndex=1`)
    .then(({ data }) => {
      // console.log(data);
    });
});
</script>

<template>
  <div class="nav-list">
    <div class="mona-live-item" v-for="(l, i) in lives" :key="i" @click="gocomment(l.actUserId, l.roomId)">
      <div class="actor-info">
        <div class="avatar" :style="{ backgroundImage: `url(${l.avatar})` }"></div>
        <div class="name">{{ l.userName }}</div>
      </div>
      <div class="lazy-load" :style="{ backgroundImage: `url(${l.bgImg})` }">
        <div class="live-info-mask">
          <div class="live-info">
            <div class="hot"></div>
            <div>直播中</div>
            <div>39.9W</div>
          </div>
          <div class="live-title">{{ l.intro }}</div>
          <div class="goods-list">
            <div v-for="(g, s) in l.shopCarts.goods" :key="s">
              <div class="son" :style="{ backgroundImage: `url(${g.cover})` }">
                <div class="price-mask">
                  <div class="price">{{ g.price }}</div>
                </div>
              </div>
            </div>
            <div class="mona-comment">
              <div class="comment-list" v-for="(c, i) in l.comments" :key="i">
                <div class="comment-img"><img :src="c.avatar" alt="" /></div>
                <div class="comment-title">
                  {{ c.content }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.nav-list {
  padding-bottom: 55px;
  user-select: none;

  .mona-live-item {
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;

    .actor-info {
      display: flex;

      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-size: cover;
        background-repeat: no-repeat;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 5px;
        z-index: 1;
        border: 3px solid hsla(0, 0%, 100%, 0.9);
      }

      .name {
        font-size: 12px;
        color: #333;
        font-weight: 500;
        line-height: 65px;
      }
    }

    .lazy-load {
      position: relative;
      margin-top: -10px;
      background-image: linear-gradient(179deg,
          transparent,
          rgba(0, 0, 0, 0.4));
      background-size: cover;
      // background-position: 50%;
      background-repeat: no-repeat;
      overflow: hidden;

      .live-info-mask {
        padding-top: 80px;
        padding-bottom: 15px;
        color: #847c7c;
        background-image: linear-gradient(180deg,
            transparent,
            rgba(0, 0, 0, 0.4));

        .live-title {
          margin-top: 5px;
          margin-left: 10px;
          color: #fff;
          text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
          text-align: initial;
        }

        .live-info {
          margin-left: 10px;
          display: flex;
          width: 120px;
          background-color: rgba(0, 0, 0, 0.26);
          text-align: center;
          line-height: 16px;
          color: #fff;
          background-color: rgba(0, 0, 0, 0.26);

          .hot {
            margin-right: 5px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #f5342f;
            will-change: opacity;
            -webkit-animation: dot-flicker 2s infinite;
            animation: star 2s infinite;
            text-align: center;
            margin-top: 5px;
            margin-left: 5px;
          }
        }

        .goods-list {
          display: flex;
          margin-top: 10px;
          margin-left: 10px;

          .son {
            margin-left: 10px;
            -webkit-box-orient: vertical;
            flex-direction: column;
            margin-right: 10px;
            width: 60px;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-color: #efefef;

            .price-mask {
              margin-top: auto;
              height: 60px;
              background-image: linear-gradient(180deg,
                  transparent,
                  rgba(0, 0, 0, 0.6));

              .price {
                line-height: 100px;
                margin-left: 5px;
                font-size: 12px;
                color: #fff;
              }
            }
          }

          .son:nth-child(1) {
            width: 60px;
            height: 60px;
            background-color: red;
            margin-left: 0;
          }

          .son:nth-child(2) {
            width: 60px;
            height: 60px;
            background-color: blue;
          }

          .son:nth-child(3) {
            width: 60px;
            height: 60px;
            background-color: red;
          }

          .mona-comment {
            .comment-list {
              display: flex;
              align-items: center;

              .comment-img {
                width: 15px;
                height: 15px;
                margin-top: 5px;

                img {
                  display: block;
                  width: 100%;
                  border-radius: 50%;
                }
              }

              .comment-title {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #fff;
                font-weight: 500;
                font-size: 12px;
                margin-left: 5px;
                width: 95px;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
}

@keyframes star {
  10% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }
}
</style>
